<template>
  <div class="box">
    <div class="content">
      <div class="s-box">
        <p class="title">实时游客统计</p>
        <p class="bg"></p>
        <p class="number">可预约总量99999人</p>
        <div class="people">
          <span v-for="(item, index) in people" :key="index">{{ item }}</span>
          <span>人</span>
        </div>
        <!-- 图形盒子 -->
        <div class="charts-box">
          <div class="charts" ref="charts">132</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts/core'
import 'echarts-liquidfill'

const people = ref(6)
const charts = ref()

let option = {
  series: [
    {
      type: 'liquidFill',
      data: [0.6, 0.5, 0.4, 0.3],
      radius: '95%',
      shape: 'arrow',
      center: ['50%', '50%'],
    },
  ],
}
// 挂载完成时，获取echarts实例
onMounted(() => {
  const myecharts = echarts.init(charts.value)
  // 设置echarts的配置
  myecharts.setOption(option)
})
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .s-box {
    width: 100%;
    height: 100%;
    background: url('@/view/screen/images/dataScreen-main-lb.png') no-repeat
      center center/cover;
    box-sizing: border-box;
    .title {
      color: white;
      font-size: 20px;
      padding-bottom: 20px;
    }
    .bg {
      width: 68px;
      height: 7px;
      background: url('@/view/screen/images/dataScreen-title.png');
    }
    .number {
      box-sizing: border-box;
      padding-top: 10px;
      padding-right: 10px;
      text-align: right;
      color: #fff;
    }
    .people {
      display: flex;
      margin-top: 30px;
      box-sizing: border-box;
      height: 56px;
      padding: 0 20px;
      span {
        display: inline-block;
        flex: 1;
        height: 56px;
        background-color: green;
        background: url('@/view/screen/images/total.png') no-repeat center
          center / contain;
        color: #29fcff;
        font-size: 30px;
        text-align: center;
        line-height: 56px;
      }
    }
    .charts-box {
      width: 100%;
      height: 250px;
      padding: 20px;
      .charts {
        width: 100%;
        height: 100%;
        // background-color: red;
      }
    }
  }
}
</style>
